import  React,{useState,useCallback} from 'react';
import ReactDOM from 'react-dom'

// class Counter extends React.Component{
//   state = {
//     count:100,
//     name:"珠峰"
//   }
//   add=()=>{
//     this.setState({
//       count:this.state.count+1
//     })
//   }
//   minus=()=>{
//     this.setState({
//       count:this.state.count-1
//     })
//   }
//   render(){
//     return <>
//       <h1>{this.state.name}当前数字是:{this.state.count}</h1>
//       <button onClick={this.add}>+</button>
//       <button onClick={this.minus}>-</button>
//     </>
//   }
// }

// function Counter2(){
//   // var count = 100;
//   // function add(){
//   //   count++
//   // }
//   // function minus(){
//   //   count--
//   // }

//   var [count,setCount] = useState(100);
//   // useState 返回值是一个数组 数组第一项对应的是数据；第二个是用来更改这个数据的函数
//   //           他的参数 是这个数据的初始值
//   function add(){
//     setCount(count+1)// 参数是数据的新值
//   }
//   function minus(){
//     setCount(count-1)
//   }
//   return <>
//     <h1>当前数字是{count}</h1>
//     <button onClick={add}>+</button>
//     <button onClick={minus}>-</button>
//   </>
// }

// function Counter3(){
//   let [state,setState] = useState({count:100,name:"珠峰"})
//   function add(){
//     setState({...state,count:state.count+1})// 参数是数据的新值
//   }
//   function minus(){
//     setState({...state,count:state.count-1})
//   }
//   return <>
//     <h1>{state.name}当前数字是{state.count}</h1>
//     <button onClick={add}>+</button>
//     <button onClick={minus}>-</button>
//   </>
// }

// function Counter4(){
//   //  函数在执行的时候 每一个函数都会形成一个闭包； 里边用到的变量都是
//   //   在执行的时候对应的值
//   let [state,setState] = useState({count:100,name:"珠峰"})
//   function add(){
//     setState({...state,count:state.count+1})// 参数是数据的新值
//   }
//   function log(){
//     // console.log(state.count)
//     // log什么时候执行 那么 这里的state对应的就是执行的时候的那个state
//     // 不一定是最新的那个值
//     setTimeout(() => {
//         console.log(state.count)
//     }, 3000);
//   }
//   return <>
//     <h1>{state.name}当前数字是{state.count}</h1>
//     <button onClick={add}>+</button>
//     <button onClick={log}>log</button>
//   </>
// }


// function Counter5(){
//   //  函数在执行的时候 每一个函数都会形成一个闭包； 里边用到的变量都是
//   //   在执行的时候对应的值
//   let [state,setState] = useState({count:100})
//   function add(){
//     setState({count:state.count+1})// 参数是数据的新值
//   }
//   function lazy(){
//     // console.log(state.count)
//     // log什么时候执行 那么 这里的state对应的就是执行的时候的那个state
//     // 不一定是最新的那个值
//     setTimeout(() => {
//         setState({count:state.count+1})
//     }, 3000);
//   }
//   function lazyFn(){
//     setTimeout(() => {
//       // 我们可以通过给setState传一个回调函数的方式来获取新的state值
//       setState((state)=>{
//         console.log(state)
//         return {count:state.count+1}
//       })
//     }, 3000);
//   }
//   return <>
//     <h1>{state.name}当前数字是{state.count}</h1>
//     <button onClick={add}>+</button>
//     <button onClick={lazy}>lazy</button>
//     <button onClick={lazyFn}>lazyFn</button>
//   </>
// }


// function Counter6(){
//   // 惰性初始化state
//   // 初始化的操作只会在第一次执行； 更新的社会化就不再执行当前的初始化操作了
//   let [state,setState] = useState(function(){
//     console.log('初始状态')
//     return {count:100}
//   })
//   console.log('render')
//   function add(){
//     setState({count:state.count+1})// 参数是数据的新值
//   }
//   return <>
//     <h1>{state.name}当前数字是{state.count}</h1>
//     <button onClick={add}>+</button>
//   </>
// }

let oldAdd= null;
function Counter7(){
  // 惰性初始化state
  // 初始化的操作只会在第一次执行； 更新的社会化就不再执行当前的初始化操作了
  let [count,setCount] = useState(100);
  let [name,setName] = useState("zhufeng");
  console.log('render')
  // const add = useCallback(()=>{
  //   setCount(count+1)// 参数是数据的新值
  // },[])// 告诉useCallback当前的传进去的这个回调函数没有任何依赖
  const add = useCallback(()=>{
    setCount(count+1)// 参数是数据的新值
  },[count])// 告诉useCallback当前的传进去的这个回调函数依赖count
  console.log(add === oldAdd)
  oldAdd = add;

  const changeName = useCallback(()=>{
    setName("珠峰")
  },[name])



  // const add = ()=>{}
  // const changeName = ()=>{}
  return <>
    <h1>{name}当前数字是{count}</h1>
    <button onClick={add}>+</button>
    <button onClick={changeName}>changeName</button>
  </>
}

ReactDOM.render(<>
  <Counter7/>
</>,document.getElementById('root'))